

<template>
    <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=35 :canDrag=false>
        <template v-slot:fix>
            <div style="height:35px;border:1px solid #CCC;padding:4px">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple"> <span class="remind_class">您被邀请参加以下试卷考试，即将开考，请予以关注！</span></div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-button style="width:72px" @click.native="btnRefresh">刷新</el-button>
                            <el-button style="width:72px" @click.native="btnClose">退出</el-button>
                        </div>
                    </el-col>

                </el-row>
            </div>
        </template>
        <div style="height:100%">
            <vxe-table show-overflow ref="xTable" :data.sync="ExmUsrAlertData" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" highlight-current-row show-header-overflow resizable header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" key="1" class="mytable-style" @current-change="currentChangeEvent" :loading="loading">
                <vxe-table-column field="username" title="考试人" width="70" align="center"></vxe-table-column>
                <vxe-table-column field="testtitle" title="考试名称" width="200"></vxe-table-column>
                <vxe-table-column field="stime" title="开考时间" width="130" align="center"></vxe-table-column>
                <vxe-table-column field="etime" title="结束时间" width="130" align="center"></vxe-table-column>
                <vxe-table-column field="maxtime" title="考试时长" width="100" align="center">
                    <template v-slot="{row}">
                        {{row.maxtime}}分钟
                    </template>
                </vxe-table-column>
                <vxe-table-column field="qflagname" title="考试类型" width="100" align="center"></vxe-table-column>
                <vxe-table-column field="createusername" title="创建人" width="70" align="center"></vxe-table-column>
                <template v-slot:fix>
                    <div style="font-size:17px;padding-top:3px;background-color:#fff;text-align:center;font-weight:bold;color:blue">共 {{datacnt}} 条</div>
                </template>
            </vxe-table>
        </div>

    </rm-layout-top>

</template>

<script type="text/javascript">
export default {
    name: "rm_devalertinfo",
    props: {
        tabledata: { type: Array },
        params: { type: Object },
    },
    data() {
        return {
            ExmUsrAlertData: this.tabledata,
            loading: false,
        };
    },
    created() {
        console.log("2221", this.params);
    },
    computed: {
        datacnt() {
            return this.ExmUsrAlertData.length;
        },
    },
    watch: {},
    mounted() {
        this.setcurRow(this.ExmUsrAlertData);
    },
    methods: {
        //刷新考试通知
        btnRefresh() {
            this.loading = true;
            this.$tool
                .request({
                    url: "ucent/alertmsg",
                    method: "post",
                    data: {
                        params: this.params.paramlist,
                    },
                })
                .then((res) => {
                    this.ExmUsrAlertData = res.data;
                    if (this.$refs.xTable && res.data.length > 0) this.setcurRow(res.data[0]);
                    this.loading = false;
                })
                .catch((e) => {
                    this.$alert(e, "提示");
                    this.loading = false;
                });
        },
        setcurRow(data) {
            if (this.$refs.xTable && data.length > 0) {
                this.$refs.xTable.setCurrentRow(data[0]);
            }
        },
        //退出
        btnClose() {
            this.$emit("change", "exmusr", this.params);
        },
    },
};
</Script>

<style scoped>
.remind_class {
    color: rgb(236, 11, 11);
    font-size: 18px;
}
::v-deep .mytable-style .vxe-body--row.row-pink {
    background-color: pink;
    color: rgb(8, 8, 8);
}

::v-deep  .mytable-style .vxe-body--column.col-red {
    background-color: red;
    color: #fff;
}
::v-deep  .mytable-style .vxe-body--column.col-blue {
    background-color: #2db7f5;
    color: #fff;
}
::v-deep .el-checkbox__inner::after {
    border: 2px solid #000000 !important;
    box-sizing: content-box;
    content: "";
    border-left: 0 !important;
    border-top: 0 !important;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform 0.15s ease-in 0.05s;
    transform-origin: center;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #000000;
    cursor: not-allowed;
}
</style>
